<template>
	<u-popup :show="show" @close="closeFun" mode="center" round="30">
		<view class="update">
			<view class="img">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/unLogin/bg1.png"></image>
			</view>
			<view v-if="!isLatest" class="content">
				<view class="text">
					<text>最新版本:{{ info.version}} </text>
					<text>版号:{{info.versionCode}}</text>
				</view>
				<view class="text">
					版本大小 :
					<text>{{ info.size }}M</text>
				</view>
				<view>
					<view class="text">更新内容</view>
					<view class="gray">{{ info.content }}</view>
				</view>

				<view class="btns" v-if="!showDownload">
					<view @click="shaoFun">稍后再说</view>
					<view class="yes" @click="update">立即更新</view>
				</view>

				<view class="line" v-else>
					<u-line-progress :percentage="percentage" height="42" activeColor="#5298FF"></u-line-progress>
				</view>
			</view>
			<view v-else class="content">已是最新版{{appVersion}}</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		versionUpdate,
	} from '@/apis/apis.js';
	export default {
		components: {},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				info: {}, // 更新信息
				showDownload: false, //开始下载
				percentage: 0,
				// 版本号
				appVersion: '',
				
					isLatest: true, // 是否最新
			};
		},
		onLoad(options) {

		},
		onUnload() {

		},
		watch: {
			show(val) {
				if (val) this.getUpdate();
			}
		},
		methods: {
			// 获取版本更新
			async getUpdate() {
				const {
					data
				} = await versionUpdate(); // 最新版本
				// #ifdef APP-PLUS
				let run = plus.runtime
				if (!data || (data.version == run.version && data.versionCode == run.versionCode) ||
					run.versionCode > data.versionCode
				) {
					this.isLatest = true;
					return false
				}
				this.info = data;
				this.isLatest = false;
				// #endif
			},
			//下载更新
			update() {
				const plat = uni.getSystemInfoSync().platform;
				// #ifdef APP-PLUS
				this.showDownload = true; // 开始下载
				if (plat == 'ios') {
					let appleId = 'com.mls.yizhi'; //appid	
					plus.runtime.openURL(`itms-apps://itunes.apple.com/cn/app/${appleId}?mt=8`);
				}
				if (plat == 'android') {
					let url = this.info.objectKey; //下载链接
					//创建下载
					let dtask = plus.downloader.createDownload(url, {}, (d, status) => {
						// 下载完成
						if (status == 200) {
							this.showDownload = false

							// 下载完成后开始安装 判断是否强制更新
							plus.runtime.install(d.filename, {
								// 是否强制更新
								force: Boolean(this.info.forceUpdate)
							}, (success) => {}, (fail) => {
								uni.showToast({
									title: "安装完成",
									icon: "none"
								})
								//安装失败
							});
						}
					});
					// 开启下载
					try {
						dtask.start();
						dtask.addEventListener('statechanged', (task, status) => {
							// tasl.state 下载状态  1正在下载  2已连接到服务器 3下载中 4下载完成
							if (task.state == 3) {
								// 下载进度
								this.percentage = parseInt((parseFloat(task.downloadedSize) / parseFloat(task
									.totalSize)) * 100);
							}
						});
					} catch (err) {
						uni.showToast({
							title: '更新失败',
							icon: 'none'
						});
					}
				}
				// #endif
			},
			// 稍后下载
			shaoFun(){
				sessionStorage.setItem("showUpDate",true);
				this.closeFun();
			},
			closeFun() {
				this.$emit("update:show", false);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.update {
		width: 580rpx;

		.line {
			margin-top: 52rpx;
		}

		.btns {
			margin-top: 52rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				background: #ffffff;
				border: 2rpx solid #194FC9;
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #194FC9;
				width: 244rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.yes {
				color: white;
				background-color: #194FC9;
			}
		}

		.img {
			width: 100%;
			height: 290rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: -60rpx;
			}
		}

		.content {
			position: relative;
			font-size: 28rpx;
			top: -60rpx;
			padding: 0 30rpx 0 44rpx;

			.text {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			text {
				margin-left: 20rpx;
			}

			text,
			.gray {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #888888;
			}

			.gray {
				margin-bottom: 10rpx;
			}
		}
	}
</style>
